<template>

  <div style="width: 25%;">

    <el-card class="box-card" style="margin:auto;text-align: center">
      <el-avatar :size="60" :src="data.imageUrl"></el-avatar>
      <div>
        <span style="font-size: 18px;font-weight: 600">{{ data.nickName }}</span>
        <p>{{ data.programmerCareer }}</p>
      </div>
      <el-button type="primary" style="width: 100%">立即沟通</el-button>
    </el-card>

    <el-card class="box-card" style="margin:0 auto">
      <span style="font-size: 18px;font-weight: 600">技能</span><br>
      <span v-for="(item,index) in data.skillNames" :key="index"> {{ item }}， </span>
    </el-card>

    <el-card class="box-card" style="margin:0 auto">
      <span style="font-size: 18px;font-weight: 600">作品</span><br>
      <span v-for="(item,index) in data.projectTitles" :key="index"> {{ item }}， </span>
    </el-card>

    <el-card class="box-card" style="margin:0 auto">
      <span style="font-size: 18px;font-weight: 600">个人简介</span>
      <p>{{ data.programmerIntroduction }} </p>
      <el-link type="primary" style="float: right;font-size: 15px;margin: 5px">更多</el-link>
    </el-card>

    <el-card class="box-card" style="margin:0 auto">
      <span style="font-size: 18px;font-weight: 600">工作经历</span><br>

      <div v-for="(item,index) in data.workExpers" :key="index">
        <el-divider></el-divider>
        <span>{{ item.beginTime }} - {{ item.endTime }}</span><br>
        <span>{{ item.company }} / {{ item.position }}</span><br>
        <el-popover
            placement="bottom"
            width="250"
            trigger="hover"
            :content=item.workExperDesc>
          <div slot="reference">
            <span style="font-size: 14px">{{ item.workExperDesc }}</span>
          </div>
        </el-popover>
      </div>
      <el-link type="primary" style="float: right;font-size: 15px;margin: 5px">更多</el-link>
    </el-card>

    <el-card class="box-card" style="margin:0 auto">
      <span style="font-size: 18px;font-weight: 600">用户评价</span><br>
      <el-rate
          v-model="data.starRating"
          disabled
          show-score
          text-color="#ff9900"
          score-template="{value}">
      </el-rate>
    </el-card>

  </div>

</template>

<script>
export default {
  name: "comparedComponents",
  props: ['data']
}
</script>

<style scoped>

</style>